<template>
  <div class="goods-item">
    <div class="item"  @click="turn('/detail?id='+item.id)">
      <div class="img-wrap">
        <img :src="imgH+item.img" alt="" class="img">
      </div>
      <div class="info" >
        <div class="name" >{{item.name}}</div>
        <div class="voucher" v-if="!home&&item.saleType==0||item.saleType==3" >
          <div class="v v1" v-if="item.cashReward&&item.cashReward.split('_')[1]>0">
            <span class="num">分享奖励￥{{item.cashReward.split('_')[1]}}元</span>
          </div>
          <div class="v v2" v-if="item.voucherReward&&item.voucherReward.split('_')[1]>0">
            <span class="num">立返换购券￥{{item.voucherReward.split('_')[1]}}</span>
          </div>
        </div>
        <div class="stock">
          <div class="block">
            <div :style="{width:(((item.totalStock-item.stock)*100/item.totalStock).toFixed(0))+'%'}" class="red"></div>
          </div>
          <span class="num">已抢{{(((item.totalStock-item.stock)*100/item.totalStock).toFixed(0))}}%</span>
        </div>
        <div class="price">
          <span class="now"><span class="icon">￥</span>{{item.nowPrice}}</span>
          <span class="old"><span class="icon">￥</span>{{item.oldPrice}}</span>
<!--          <div class="voucher" v-if="item.cashReward&&item.cashReward.split('_')[1]">-->
<!--            <div class="vst">赚</div>-->
<!--            <div class="money">{{item.cashReward.split('_')[1]}}元</div>-->
<!--          </div>-->
          <span class="buy" v-if="!home">去抢购</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        props:{
            item:Object,
            home:Boolean
        },
        methods:{
          turn(path){
            this.$router.push(path)
          }
        },
        data(){
            return {

            }
        },
        computed:{
            imgH(){
                return process.env.VUE_APP_IMG_DOMAIN
            }
        }
    }
</script>

<style scoped lang="stylus">
.item
  display flex
  flex-direction column
  align-items center
  overflow hidden
  border-radius 5px
  .img-wrap
    position relative
    overflow hidden
    height 173px
    .img
      width: 100%;
      height 100%
      object-fit cover
  .info
    align-self: stretch;
    padding 10px 8px
    background-color white
    //display flex
    align-items center
    justify-content space-between
    flex-direction column
    overflow hidden
    .voucher
      font-size: 8px;
      font-family: PingFang SC;
      font-weight: 500;
      display flex
      justify-content space-between
      margin 10px 0
      height: 14px;
      .v
        display flex
        justify-content center
        width: 72px;
        background: #FEE0DD;
        border-radius: 3px;
        align-items center
        line-height 14px
      .v1
        background-color #FEE0DD
        color #FE4B38
      .v2
        background-color #FFF7DE
        color #FF9616
    .name
      width 100%
      color #333333
      font-size 15px
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      overflow hidden
    .stock
      width 100%
      margin 9px 0 9px 0
      display flex
      align-items center
      justify-content space-between
      .block
        overflow hidden
        background-color #EBEBEB
        height 6px
        border-radius 5px
        width 70%
        .red
          background-color   #FE4B38
          height 100%
      .num
        line-height 8px
        font-size 9px
        color: #929292;
    .price
      display flex
      width 100%
      align-items: center;
      .buy
        font-size: 9px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        padding 6px 12px
        border-radius 10px
        background-color #FE4B38
      .now
        font-weight bold
        font-size 18px
        color #333333
        .icon
          font-size 9px
          font-weight bold
      .old
        flex 1
        margin-left 8px
        text-decoration line-through
        color #C8C8C8
        font-size 8px
      .voucher
        font-size 9px
        color white
        display flex
        background-color red
        text-align center
        line-height 15px
        border-radius 3px
        overflow hidden
        .vst
          height 15px
          padding 0 2px 0 4px
          border-right  2px white dotted
        .money
          height 15px
          padding 0 5px


</style>